<template>
  <view class="w100p pr common_wrap">
    <CommonHeader
      :title="$t('采购详情')"
      color="#fff"
      backgroundColor="rgba(0,0,0,1)"
      :is-right="false"
    ></CommonHeader>

    <view class="w100p flex-item oh">
      <scroll-view scroll-y class="w100p scroll-Y">
        <view
          class="w100p swiper_video"
          :style="{ top: +statusBarHeight + 44 + 'px' }"
        >
          <swiper
            class="w100p swiper"
            circular
            :indicator-dots="true"
            indicator-color="#9B969A"
            indicator-active-color="#fff"
            :circular="true"
          >
            <swiper-item
              v-if="
                !!(
                  purchaseInfo.purchaseInfo &&
                  purchaseInfo.purchaseInfo.productVideoUrls
                )
              "
            >
              <view class="pr video_wrap">
                <video
                  id="myVideo"
                  class="w100p palyxxx"
                  :src="get(purchaseInfo, 'purchaseInfo.productVideoUrls')"
                  :show-center-play-btn="true"
                  object-fit="cover"
                  play-btn-position="center"
                  :controls="true"
                  :autoplay="false"
                  muted
                  :poster="getImageUrl(currntMainPic)"
                ></video>
                <view class="video-wrapxx">
                  <image
                    :src="getImageUrl(currntMainPic)"
                    mode="aspectFill"
                  ></image>
                </view>
                <cover-view
                  class="pa play_wrap"
                  @click="playsHeader(currentVideo)"
                >
                  <view class="icon_wrap">
                    <u-icon
                      name="play-right-fill"
                      color="#fff"
                      size="46"
                    ></u-icon>
                  </view>
                </cover-view>
              </view>
            </swiper-item>
            <swiper-item
              v-for="(item, index) in get(
                purchaseInfo,
                'purchaseInfo.productImgUrls'
              ) ? get(
                purchaseInfo,
                'purchaseInfo.productImgUrls'
              ).split(',') : []"
              :key="index"
            >
              <image
                class="w100p img"
                :src="getImageUrl(item)"
                mode="aspectFill"
                @click="amplifyImg(item)"
                style="height: 100%"
              ></image>
            </swiper-item>
          </swiper>
          <cover-view class="pa history_wrap">
            <u-notice-bar
              class="w100p"
              mode="vertical"
              :is-circular="false"
              :volume-icon="false"
              type="none"
              :list="historyList"
              font-size="22"
              duration="5000"
            ></u-notice-bar>
          </cover-view>
        </view>
        <view :style="{ marginTop: getTopR() }"></view>
        <view class="common_content pr w100p">
          <view class="w100p shop_card">
            <view class="price-wrppx">{{ $t("采购") }}</view>
            <view class="w100p flex-column card_wrap">
              <view class="namex">
                {{
                  get(purchaseInfo, `purchaseInfo.${plangJava("productName")}`)
                }}
              </view>
            </view>
          </view>
          <cover-view class="pa swiper_wrap"></cover-view>
        </view>
        <!-- 采购 -->
        <view class="wrapper-info pr">
          <!-- 基础信息 -->
          <view
            class=""
            :class="langR == 'ru' ? 'r_base-info base-info' : 'base-info'"
						@click="goPerson"
          >
            <view class="left-avatar">
              <view class="avatar-w">
                <view class="avatar">
                  <image
                    :src="getImageUrl(purchaseInfo.avatar)"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="country">
                  <flag :country="purchaseInfo.country"></flag>
                  <!-- <image src="/static/caigou/ru.png" mode="aspectFill"></image> -->
                </view>
              </view>
              <view class="desc-avatar">
                <view class="name ellipsis_one">{{
                  purchaseInfo[plangJava("username")]
                }}</view>
                <view class="vip-leval">
                  <view class="circle">
                    <image
                      v-if="purchaseInfo.vipLevel == 0"
                      src="@/static/detail/vip_1.png"
                      mode="scaleToFill"
                    />
                    <image
                      v-if="purchaseInfo.vipLevel == 1"
                      src="@/static/detail/vip_2.png"
                      mode="scaleToFill"
                    />
                    <image
                      v-if="purchaseInfo.vipLevel == 2"
                      src="@/static/detail/vip_3.png"
                      mode="scaleToFill"
                    />
                    <image
                      v-if="purchaseInfo.vipLevel == 3"
                      src="@/static/detail/vip_4.png"
                      mode="scaleToFill"
                    />
                  </view>
                  <text>VIP</text>
                </view>
             
              </view>
            </view>
            <!-- 单数 -->
            <view class="right-numwrap">
              <view class="li">
                <view
                  class="txt"
                  :style="langR == 'zh' ? '' : 'font-size:24rpx;'"
                  >{{ $t("发布采购") }}</view
                >
                <view class="num">{{ purchaseInfo.totalPurchase }}</view>
              </view>
              <view
                class="li"
                :style="
                  langR == 'zh' ? 'margin-left:30rpx' : 'margin-left:20rpx'
                "
              >
                <view
                  class="txt"
                  :style="langR == 'zh' ? '' : 'font-size:24rpx;'"
                  >{{ $t("成交单数") }}</view
                >
                <view class="num">{{ purchaseInfo.totalDeal }}</view>
              </view>
              <view
                class="li"
                :style="
                  langR == 'zh' ? 'margin-left:30rpx' : 'margin-left:20rpx'
                "
              >
                <view
                  class="txt"
                  :style="langR == 'zh' ? '' : 'font-size:24rpx;'"
                  >{{ $t("成交率") }}</view
                >
                <view class="num">{{ ((purchaseInfo.dealRate || 0) * 100).toFixed(0) }}%</view>
              </view>
            </view>
          </view>
          <view class="reprot"
            ><block v-if="langR == 'zh'">{{ $t("已有") }}</block
            >{{ purchaseInfo.participateCount
            }}{{ $t("人感兴趣并参与报价") }}</view
          >

          <!-- 采购信息 -->
          <view class="caigou-info">
            <view class="title">
              <view class="name">{{ $t("采购信息") }}</view>
              <view class="status">{{
                get(purchaseInfo, "purchaseInfo.status") == 1
                  ? $t("已完成")
                  : $t("进行中")
              }}</view>
            </view>
            <view class="list">
              <view class="txt">{{ $t("需求商品") }}</view>
              <view class="txtContent">{{
                get(purchaseInfo, `purchaseInfo.${plangJava("productName")}`)
              }}</view>
            </view>
            <!-- <view class="list">
            <view class="txt">期望品牌</view>
            <view class="txt">{{get(purchaseInfo, 'purchaseInfo.productName')}}</view>
          </view> -->
            <!-- <view class="list">
            <view class="txt">期望单价</view>
            <view class="txt"></view>
          </view> -->
            <view class="list">
              <view class="txt">{{ $t("目的地") }}</view>
              <view class="txtContent">{{
                get(purchaseInfo, `purchaseInfo.${plangJava("destination")}`)
              }}</view>
            </view>
            <view class="list">
              <view class="txt">{{ $t("需求数量") }}</view>
              <view class="txtContent" v-if="langR == 'zh'"
                >{{ get(purchaseInfo, "purchaseInfo.amount") }}
                {{ get(purchaseInfo, "purchaseInfo.unit") }}</view
              >
              <view class="txtContent" v-if="langR == 'ru'"
                >{{ get(purchaseInfo, "purchaseInfo.amount") }}
                {{ get(purchaseInfo, "purchaseInfo.unitRu") }}</view
              >
            </view>
            <!-- <view class="list">
            <view class="txt">期望生产日期</view>
            <view class="txt"></view>
          </view> -->
          </view>

          <!-- 商品其他文件 -->
          <view
            class="file-wrap"
            v-if="get(purchaseInfo, 'purchaseInfo.productOtherFileUrls')"
          >
            <view class="w100p big_title">
              {{ $t("商品") }}{{ $t("其他") }}{{ $t("文件") }}
            </view>
            <scroll-view scroll-x class="scrolxxx-wwww">
              <view class="w100p scrolxxx">
                <image
                  class="goback_img"
                  v-for="(item, index) in get(
                    purchaseInfo,
                    'purchaseInfo.productOtherFileUrls'
                  ).split(',')"
                  :src="getImageUrl(item)"
                  mode="aspectFill"
                  @click="amplifyImg(item)"
                  :key="index"
                ></image>
              </view>
            </scroll-view>
          </view>

          <!-- 图片列表  -->
          <view class="w100p">
            <view style="height: 16rpx"></view>
            <view class="w100p shop_introduce">
              <view class="title">{{ $t("商品介绍") }}</view>
              <view class="">
                {{
                  get(purchaseInfo, `purchaseInfo.${plangJava("description")}`)
                }}
              </view>
              <!-- <u-parse :html="$t('这个是商品介绍介绍这个是商品介绍介绍这个是商品介绍介绍')"></u-parse> -->
            </view>
            <view class="w100p shop_introduce">
              <view class="w100p">
                <view
                  class="full_img oh"
                  v-for="(
                    item, index
                  ) in get(purchaseInfo,'purchaseInfo.productImgUrls') ? get(purchaseInfo,'purchaseInfo.productImgUrls').split(',') : []"
                  :key="index"
                >
                  <image
                    class="w100p"
                    :src="getImageUrl(item)"
                    mode="widthFix"
                    @click="amplifyImg(item)"
                  ></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部导航栏 -->
    <view class="footer-nav">
      <view class="footer-wrapper" style="text-align: center; line-height: 1">
        <view class="btn warning" @click="inlineCall">{{ $t("聊天") }}</view>
        <view class="btn blue" @click="callPhone"
          >{{ $t("拨打视频通话")
          }}<image
            src="/static/translatexx.png"
            class="translatexxxxxx"
            mode="widthFix"
        /></view>
        <view v-if="purchaseInfo.quotationFlag" class="btn lvse">{{
          $t("已报价")
        }}</view>
        <view
          v-else
          class="btn lvse"
          @click="onParticipate(purchaseInfo.purchaseInfo)"
          >{{ $t("参与报价") }}</view
        >
      </view>
    </view>

    <!-- 播放视频 -->
    <uni-popup
      ref="popupVideo"
      type="center"
      background-color="#000"
      mask-background-color="#000"
      class="popvexxx"
    >
      <view class="wrapper-video">
        <video
          id="mainVideo"
          :src="playVideo"
          :show-center-play-btn="true"
          object-fit="cover"
          play-btn-position="center"
          :controls="true"
          :autoplay="true"
          class="video-main"
          :show-fullscreen-btn="false"
        ></video>
      </view>
    </uni-popup>

    <!-- 图片放大 -->
    <uni-popup
      ref="popup"
      class="common_pop"
      mask-background-color="rgba(0,0,0,1)"
    >
      <view class="w100p">
        <image
          class="w100p"
          :src="commonImg"
          mode="widthFix"
          @click="closePop"
        ></image>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { IMAGE_URL } from "@/config/app";

import CommonHeader from "@/pages/components/common-header.vue";
import { purchaseInfoGet } from "@/api/caigou.js";
import { request_minute, chechkIm } from "@/api/basic";

export default {
  data() {
    return {
      statusBarHeight: uni.getStorageSync("statusBarHeight"),
      videos: null, // 播放ref
      playVideo: "",
      commonImg: "",
      currntMainPic: "",
      currentVideo: "",
      isShow: true,
      historyList: [], //浏览记录列表
      list: [],
      product: {},
      purchaseInfo: {},
      IMAGE_URL: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/",
    };
  },
  components: {
    CommonHeader,
  },
  methods: {
		goPerson() {
			if (this.purchaseInfo.identityType == 0) {
				uni.navigateTo({
					url: `/pages/details/merchantDetail?bid=${this.purchaseInfo.shopId}`,
					webview: 'zWebViewShop'
				})
			} else {
				uni.navigateTo({
					url: `/pages/myPersonPage/index?targetUserId=${this.purchaseInfo.purchaseInfo.publishUserId}`,
					webview: 'zWebView'
				})
			}
		},
    //获取详情
    getPurchaseInfo(id) {
      purchaseInfoGet({
        purchaseInfoId: id,
        userId: uni.getStorageSync("user_id"),
      }).then((res) => {
        if (res.code == 0) {
          this.purchaseInfo = res.data;
          this.currentVideo = res.data.purchaseInfo.productVideoUrls || "";
          if ( this.purchaseInfo.purchaseInfo) {
            this.currntMainPic =
            this.purchaseInfo.purchaseInfo.productImgUrls.split(",")[0];
          }
       
          console.log(this.currntMainPic, "sdsdsdsd");
        }
      });
    },
    inlineCall() {
      console.log("purchaseInfo", this.purchaseInfo);
      // this.isMessageGo({
      // 	action: 'initiateChat',
      // 	data: this.purchaseInfo.purchaseInfo.publishUserId
      // })

      if (
        uni.getStorageSync("user_id") ==
        this.purchaseInfo.purchaseInfo.publishUserId
      ) {
        uni.showToast({
          title: this.$t("不能和自己聊天"),
          icon: "none",
        });
      } else {
        this.isMessageGo({
          action: "initiateChat",
          data: this.purchaseInfo.purchaseInfo.publishUserId,
        });
        return;
        chechkIm({
          send_uid: uni.getStorageSync("user_id"),
          receive_uid: this.purchaseInfo.purchaseInfo.publishUserId,
        }).then((res) => {
          if (res.data.code == 1) {
            this.isMessageGo({
              action: "initiateChat",
              data: this.purchaseInfo.purchaseInfo.publishUserId,
            });
          } else {
            if (res.data.data.send_user == false) {
              uni.$u.toast(this.$t("积分不足，请充值积分"));
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/vip/scorePoint",
                });
              }, 500);
            } else {
              uni.$u.toast(this.$t("对方积分不足"));
            }
          }
        });
      }
    },
    callPhone() {
      console.log("999999", uni.getStorageSync("user_id"), this.purchaseInfo);
      // return
      if (
        uni.getStorageSync("user_id") ==
        this.purchaseInfo.purchaseInfo.publishUserId
      ) {
        uni.showToast({
          title: this.$t("不能给自己打电话"),
          icon: "none",
        });
      } else {
        request_minute({
          user_id: uni.getStorageSync("user_id"),
          target_id: this.purchaseInfo.purchaseInfo.publishUserId,
        }).then((res) => {
          if (res.data.data.flag == 1) {
            this.isMessageGo({
              action: "call",
              data: {
                userId: this.purchaseInfo.purchaseInfo.publishUserId,
                type: res.data.data.type || 1,
              },
            });
          } else {
            uni.showToast({
              title: this.$t("积分不足，请充值积分"),
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/vip/scorePoint",
                webview: "zWebView",
              });
            }, 500);
          }
        });
      }
    },
    // 参与报价
    onParticipate(info) {
      if (info.publishUserId == uni.getStorageSync("user_id")) {
        uni.showToast({
          title: this.$t("不能给自己报价"),
          icon: "none",
        });
      } else {
        uni.redirectTo({
          url: "/pages/caigou/canyuOrder/index?id=" + info.id,
        });
      }
    },
    getTopR() {
      return `calc(${+this.statusBarHeight}px + 44px + 400rpx)`;
    },
    // 播放头部视频
    playsHeader(video) {
      // 判断安卓
      const systemInfo = uni.getSystemInfoSync();
      // 判断是否为 Android 系统
      if (systemInfo.platform === "android") {
        this.playVideo = video;
        this.$refs.popupVideo.open();
        return;
      }
      this.videos.requestFullScreen();
      this.$nextTick(() => {
        this.videos.play();
      });
    },
    // 关闭图片弹窗
    closePop() {
      this.$refs.popup.close();
    },
    // 图片放大
    amplifyImg(imgUrl) {
      if (!imgUrl) return;
      this.commonImg = imgUrl;
      this.$refs.popup.open();
    },
    // 获取数据
    async getData() {
      const { data } = await this.$u.api.shopping.getProduct({
        id: 338,
      });
      this.currntMainPic = data.product.pic;
      this.list = [data.product.pic, data.product.pic, data.product.pic];
      this.currentVideo = data.product.video;
      this.product = data.product;
    },
    // 浏览记录列表
    async getHistoryData() {
      try {
        const { data } = await this.$u.api.shopping.getMemberHistory({
          id: 338,
          type: "shop",
        });
        this.historyNum = data.member_history_count || 0;
        if (!!data.member_history?.length) {
          let arr = [];
          data.member_history.map((item, index) => {
            let str = item[this.plang("username")] + this.$t("正在查看");
            arr.push(str);
          });
          this.historyList = [...arr];
        }
      } catch (e) {}
    },
  },

  onLoad(options) {
    console.log(options, "选项选项选项....");
    this.videos = uni.createVideoContext("myVideo");
    // this.getData();
    // this.getHistoryData();
    this.getPurchaseInfo(options.id);
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
@import "@/assets/appScss.scss";
.palyxxx {
  position: inherit;
}
.video-wrapxx {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.r_base-info {
  flex-direction: column;
  align-items: flex-start !important;
  .right-numwrap {
    margin-top: 20rpx;
    margin-right: 10rpx;
    .li {
      .txt {
        white-space: nowrap !important;
      }
    }
  }
}
</style>
